<template>
  <div class="main">
      <div class="device">
        <div class="dleft">
          <span style="font-weight:500">智慧灯光</span>
          <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
        </div>
        <div @click="toMain" class="dmid">
          <span><img align="absmiddle" style="width: 5vw" src="@svg/id.svg"/>&nbsp;ID: {{deviceData.ID}}</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/humi.svg"/>&nbsp;光强: {{deviceData.L}}Lux</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/mode.svg"/>&nbsp;模式: {{deviceData.mode===true?'自动':'手动'}}</span>
          <span><img align="absmiddle" style="width: 5vw;" src="@svg/set.svg"/>&nbsp;阈值: {{deviceData.setA}}Lux</span>       
        </div>
        <div class="dright">
            <van-switch v-model="deviceData.ledState" size="24px" :disabled="deviceData.mode===true?true:false" :loading="deviceData.ledload" @change="onledChange(deviceData)" />    
        </div>
      </div>
  </div>
</template>

<script>
import mqtt from 'mqtt'
//import { Dialog } from 'vant';
import { Toast } from 'vant';
var client
const options = {
    connectTimeout: 40000,
    clean: true
  }
 client = mqtt.connect('ws://121.5.58.100:8083/mqtt', options)
export default {
  name: 'Device',
  props: {
    id:String
  },
  components :{
  },
  created: function() {
      this.mqttMsg()
  }, 
  data() {
    return {
      gpioc: '',
      modec: '',
      setAc: '',
      isLoad: false,
      checked: false,
      show:true,
      value: 0,
      send: '',
      param: '',
      flag: true,
      num: '',
      deviceData: {
        ID: this.id,
        L:'--',
        mode:true,
        setA: 0,
        ledload: false,
        ledState: false
      },
    }
  },
  methods: {
    toMain() {
      console.log('to')
      this.$router.push({
        name: 'smartLightMain',
        params: {
            routerType: 'push'
        }
      });
    },
    onledChange(res) {
        this.deviceData.ledState = res.ledState
        this.deviceData.ledload = true
        client.publish('XXP/sub','code:LF')
    },
    onModeChange(detail) {
      this.deviceData.mload = true
      this.param = '{"ID":'+this.deviceData.ID+',"modeFlag":'+(detail.mode===true?1:0)+',"setA":-1,"gpioState":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.modec=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    onAChange(detail) {
      this.deviceData.sload = true
      this.param = '{"ID":'+this.deviceData.ID+',"setA":'+detail.setA+',"modeFlag":-1,"gpioState":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.setAc=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    mqttMsg() {
      client.on('connect', () => {
        console.log("连接成功！！！")
        client.subscribe('XXP/pub', { qos: 0 }, (error) => {
          if (!error) {
            console.log('订阅成功')
          } else {
            console.log('订阅失败')
          }
        })
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        console.log(message.toString())   //控制台显示接收到的数据
        this.data = message.toString()
        this.res = JSON.parse(message.toString())
        this.deviceData.ID = '1'
        this.deviceData.L = this.res.L
        this.deviceData.mode = this.res.Mode==='1'?true:false
        this.deviceData.setA = this.res.set
          if(this.deviceData.ledload){
            if(this.deviceData.ledState=== (this.res.Light==='1'?true:false)) {
                this.deviceData.ledload=false
                Toast.success('灯光设定成功')
            }
          }
          else {
            this.deviceData.ledState = this.res.Light==='1'?true:false
          } 
        })
    },
  }
}
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
}
.device {
  width: 85vw;
  height: 28vw;
  display: flex;
  justify-content:left;
  align-items:center;
  border-radius: 20px;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 10px 10px;
  background-color: white;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}
.dleft {
  flex: 0 0 20vw;
  width: 50px;
  text-align: center;
  order: -1; /* 让 #left 居于左侧 */
}
.dmid {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 10px;
  font-size: 4vw;
}
.dright {
  flex: 0 0 20vw;
  text-align: center;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
